<template>
    <div class="min">
        <div class="top">
            <el-input v-model="input" placeholder="请输入学校名称或代码" width="200px" />
            地区：<el-select v-model="value" class="m-2" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            学校办别：<el-select v-model="value" class="m-2" placeholder="请选择">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button type="primary">查询</el-button>
            <el-button type="primary" @click="Insert">新增</el-button>
        </div>
        <div class="bottom">
            <el-table :data="schoolList" border style="width: 100%">
                <el-table-column align="center" prop="id" label="序号" />
                <el-table-column align="center" prop="name" label="学校名称" />
                <el-table-column align="center" prop="" label="学校代码" />
                <el-table-column align="center" prop="sType" label="学校类型" />
                <el-table-column align="center" prop="sSystem" label="学校办别" />
                <el-table-column align="center" prop="area" label="所属地区" />
                <el-table-column align="center" prop="address" label="操作">
                    <!-- <el-link type="primary" @click="draweradd">查看</el-link>
                    <el-link type="primary" >删除</el-link> -->
                    <template #default="scope">
                        <!-- draweradd(scope.row) -->
                        <el-link type="primary" @click="draweradd(scope.$index)">查看</el-link>
                        <el-link type="primary" @click="deletes(scope.row)">删除</el-link>
                        <!-- handleDelete(scope.row.adminid) -->
                        <!-- <el-button type="danger" @click="handleDelete">删除</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-drawer v-model="drawer" title="查看学校" :before-close="handleClose">
            <h4>{{ grade.name }}</h4>
            <p>学校代码:{{ grade.phone }}<span></span></p>
            <p>学段:{{ grade.sType }}</p>
            <p>学校办别:{{ grade.sSystem }}</p>
            <p>所属地区:{{ grade.area }}</p>
            <p>详细地址:{{ grade.areaDetail }}</p>
            <p>联系电话:{{ grade.phone }}</p>

        </el-drawer>
    </div>
</template>

<script  setup lang="ts">
import {useRouter} from 'vue-router'
import { onMounted, ref } from 'vue';
import server from '@/api';
import { ElNotification } from 'element-plus';

var drawer = ref(false)
// var form = ref({ id: '', sType: '', name: '', sSystem: '', area: '', areaDetail: '', phone: '' })
// 查看
let grade = ref({})
// let deletes = ref([])
var draweradd = (index: number) => {
    console.log(index);
    console.log(schoolList.value[index]);
    grade.value = schoolList.value[index]
    drawer.value = true
}
var handleClose = () => {
    drawer.value = false
}

var router = useRouter()
var schoolList = ref([])

var Insert = () => {
    router.push('/index/xuexiaoguanli/school/schooladd')
}
onMounted(async () => {
    var res = await server.xuexiaotongji.school_getSchoolByPage({ cp: 1, ps: 5 })
    console.log(res.data.data.data)
    schoolList.value = res.data.data.data

})
var deletes = async (row: any) => {
    var res = await server.xuexiaotongji.school_deleteSchool(row.id)
    // console.log(res.data);

    if(res.data.code==200){
        ElNotification.success({message:"删除成功"})
        var i = schoolList.value.findIndex((item)=>item.id==row.id)
        schoolList.value.splice(i,1)
    }
}
</script>

<style scoped>
.top {
    /* height: 60px; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 10px;
}

.top .el-input {
    width: 300px;
}

.min {
    background-color: #fff;
    height: 100%;
}

.el-input__inner {
    width: 400px;
}

.el-table__inner-wrapper {
    text-align: center;
}

.cell .el-link {
    margin-left: 10px;
}

:deep(.el-drawer__header) {
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid #e6e6e6;
}

:deep(.el-drawer__title) {
    /* font-size: 18px; */
    font-weight: 700;
    color: #000;
}

:deep(.el-drawer) p {
    margin-top: 10px;
    font-size: 12px;
    line-height: 30px;
}</style>